<template>
    <div class="Menu">
        <a-button block v-for="item in Model" @mousedown="mousedown(item)"> {{ item.Base.Name }}</a-button>
    </div>
</template>
<script setup>
import { ref, inject, onUnmounted } from 'vue';
const props = defineProps(['Model']);

// 注入响应式的值
const ActiveModel = inject('ActiveModel')

const emit = defineEmits(['UseActiveModel']);
const mouseup = function () {
    emit('UseActiveModel');
    document.removeEventListener('mouseup', mouseup);
}

const mousedown = function (item) {
    ActiveModel.value = item;
    document.addEventListener('mouseup', mouseup);
};


onUnmounted(() => {
    document.removeEventListener('mouseup', mouseup);
})

</script>
<style lang="less" scoped>
.Menu {
    width: 100px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    // background-color: #000;

    .Item {
        width: 90px;
        border-radius: 5px;
        border: 1px solid;
    }

}
</style>